<template>
  <el-card shadow="never" :body-style="{ padding: '16px 16px' }" class="cus-card">
    <el-form v-loading="loading" ref="form" class="goods-form" size="small">
      <!-- 商品类型 -->
      <goods-edit-region
        title="商品类型"
        ref="goodsEditRegion">
        <el-form-item>
          <el-radio-group v-model="form.type">
            <el-radio class="dc-radio" :label="0" border>
              <span class="dc-name">实物商品</span>
              <span class="dc-desc">（物流发货）</span>
            </el-radio>
            <el-radio class="dc-radio" :label="1" border>
              <span class="dc-name">虚拟商品</span>
              <span class="dc-desc">（无需物流）</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </goods-edit-region>

      <!-- 基本信息 -->
      <goods-edit-region
        title="基本信息"
        class="base-edit-region"
        ref="goodsEditRegion">
        <el-form-item label="商品名：" label-width="100px">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="分享描述：" label-width="100px">
          <el-input v-model="form.subTitle"></el-input>
          <p class="form-item-help">微信分享给好友时会显示，建议36个字以内</p>
        </el-form-item>
        <el-form-item label="商品卖点：" label-width="100px">
          <el-input v-model="form.sellPoint"></el-input>
          <p class="form-item-help">在商品详情页标题下面展示卖点信息，建议60字以内</p>
        </el-form-item>
        <el-form-item label="商品图：" label-width="100px">
          <image-select-list v-model="form.pictures" ref="ImageSelectList"/>
          <p class="form-item-help">建议尺寸：800*800像素，你可以拖拽图片调整顺序，最多上传15张</p>
        </el-form-item>
        <el-form-item label="商品分类：" label-width="100px">
          <el-cascader
            v-model="cateIds"
            :props="{ value: 'id', label: 'name' }"
            :options="cateOptions"
            :show-all-levels="false"
            @change='handleChange'>
          </el-cascader>
        </el-form-item>
      </goods-edit-region>

      <!-- 价格库存 -->
      <goods-edit-region
        title="价格库存"
        ref="goodsEditRegion">
        <el-form-item label="商品规格：" label-width="100px">
          <sku ref="sku"
            :fetchSkuNames="getSkuNames"
            :fetchSkuName="getAndSaveSkuName">
          </sku>
          <p class="form-item-help">如有颜色、尺码等多种规格，请添加商品规格</p>
        </el-form-item>
        <el-form-item label="价格：" label-width="100px">
          <el-input v-model="form.price" style="width: 200px" ></el-input>
        </el-form-item>
        <el-form-item label="划线价：" label-width="100px">
          <el-input v-model="form.origin_price" style="width: 200px" ></el-input>
        </el-form-item>
        <el-form-item label="库存扣减方式：" label-width="100px">
          <el-input v-model="form.name" style="width: 200px" ></el-input>
        </el-form-item>
        <el-form-item label="库存" label-width="100px">
          <el-input v-model="form.total_stock" style="width: 200px" ></el-input>
        </el-form-item>
        <el-form-item label="重量" label-width="100px">
          <el-input v-model="form.name" style="width: 200px" ></el-input>
        </el-form-item>
      </goods-edit-region>

      <!-- 物流信息 -->
      <goods-edit-region
        title="物流信息"
        ref="goodsEditRegion">
        <el-form-item label="价格：" label-width="100px">
          <el-input v-model="form.name" style="width: 200px" ></el-input>
        </el-form-item>
      </goods-edit-region>

      <!-- 物流信息 -->
      <goods-edit-region
        title="其他信息"
        ref="goodsEditRegion">
        <el-form-item label="价格：" label-width="100px">
          <el-input v-model="form.price" style="width: 200px" ></el-input>
        </el-form-item>
      </goods-edit-region>

      <!-- 商品详情 -->
      <goods-edit-region
        title="商品详情"
        ref="goodsEditRegion">
        <el-form-item label="商品详情：" label-width="100px">
          <tinymce width="56%" ></tinymce>
        </el-form-item>
      </goods-edit-region>

      <!-- 操作按钮 -->
      <div class="app-actions">
        <div class="form-actions">
          <el-button
            type="primary"
            size="small"
            @click="onSubmit">
            立即保存
          </el-button>
          <el-button
            size="small"
            @click="$router.push({ name: 'goods' })">
            返回
          </el-button>
        </div>
      </div>
    </el-form>
  </el-card>
</template>

<script>
import Sku from '@/components/Sku/index'
import ImageSelectList from '@/components/ImageSelectList'
import Tinymce from "@/components/Tinymce";
import GoodsEditRegion from './components/GoodsEditRegion'

import { createProduct, updateProduct, getProductDetails } from '@/api/product'
import { getSkuNames, fetchSkuName } from '@/api/sku'
import { getProductCategoryList } from '@/api/productCategory'

export default {
  components: {
    Sku,
    Tinymce,
    GoodsEditRegion,
    ImageSelectList
  },
  data() {
    return {
      id: undefined,
      loading: false,
      skuName: [],
      cateOptions: [],
      cateIds: [],
      form: {
        type: 0,
        title: null,
        price: null,
        origin_price: null, // 划线价格
        cost_price: null, // 成本价
        total_stock: 0, // 库存
        stock_deduct_mode: 0, // 库存扣减方式
        weight: null, // 重量(g)
        subTitle: null, // 分享描述
        sellPoint: null,
        pictures: [], // 商品图
        cateId: null, // 分类
        product_no: null, // 商品编码
        productSkus: []
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    if (this.id) {
      this.getProductDetails()
    }
    this.getProductCategoryList()
  },
  methods: {
    // 新建商品
    createProduct () {
      createProduct(this.form).then(res => {
        if (res.status === 'success') {
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          this.$message({
            type: 'warning',
            message: res.message
          })
        }
      })
    },
    // 新建商品
    updateProduct () {
      updateProduct(this.id, this.form).then(res => {
        if (res.status === 'success') {
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          this.$message({
            type: 'warning',
            message: res.message
          })
        }
      })
    },
    // 获取商品详情
    getProductDetails () {
      this.loading = true
      getProductDetails(this.id).then(res => {
        this.loading = false
        if (res.status === 'success') {
          const {
            type,
            title,
            price,
            origin_price,
            cost_price,
            total_stock,
            stock_deduct_mode,
            weight,
            sub_title,
            sell_point,
            pictures,
            category,
            product_no,
            productSkus,
            category_id,
            ancestorsIds
          } = res.data

          this.form.type = type
          this.form.title = title
          this.form.price = price
          this.form.origin_price = origin_price
          this.form.cost_price = cost_price
          this.form.total_stock = total_stock
          this.form.stock_deduct_mode = stock_deduct_mode
          this.form.weight = weight
          this.form.subTitle = sub_title
          this.form.sellPoint = sell_point
          this.form.pictures = pictures ? pictures : []
          this.form.category = category
          this.form.product_no = product_no

          let cateIds = []
          if (category_id) {
            if (ancestorsIds.length > 0) {
              cateIds = cateIds.concat(ancestorsIds)
            }
            cateIds.push(category_id)
          }
          this.cateIds = cateIds

          productSkus && this.$refs.sku._setData(productSkus)
        }
      })
    },
    // 点击提交
    onSubmit () {
      this.form.productSkus = this.$refs.sku._getData()
      if (this.id) {
        this.updateProduct()
      } else {
        this.createProduct()
      }
    },
    // 规格名称
    getSkuNames (cb) {
      getSkuNames().then(res => {
        cb(res.data)
      })
    },
    // 获取和保存规格名称
    getAndSaveSkuName (text, cb) {
      fetchSkuName({ text }).then(res => {
        if (res.status === 'success') {
          cb(res.data)
        } else {
          cb()
        }
      })
    },
    // 商品分类
    getProductCategoryList () {
      getProductCategoryList().then(res => {
        if (res.status === 'success') {
          this.cateOptions = res.data
        }
      })
    },
    handleChange(value) {
      this.form.cateId = value[value.length - 1]
    }
  }
}
</script>

<style lang="scss">
.goods-form {
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-input {
    color: #333;
    .el-input__inner {
      border: 1px solid #bbb;
    }
  }
  .el-form-item__label {
    font-size: 12px;
    color: #333;
  }
  .form-item-help {
    line-height: 14px;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0;
    color: #999;
  }
  .base-edit-region {
    .el-input {
      width: 460px;
    }
  }
  .el-table thead {
    color: rgb(51, 51, 51);
  }

  .el-table td {
     color: rgb(51, 51, 51);
  }
}

.dc-radio {
  &.el-radio {
    margin-right: 0;
    &.is-bordered {
      height: 52px;
      border-radius: 2px;
      &.is-checked {
        &::after {
          content: "";
          display: inline-block;
          position: absolute;
          width: 24px;
          height: 24px;
          bottom: -1px;
          right: -1px;
          background: url("") no-repeat;
          background-size: 24px auto;
        }
      }
    }
  }
  .el-radio__input {
    display: none
  }
  .el-radio__label {
    display: inline-block;
    text-align: center;
    font-weight: normal;
    border-radius: 2px;
  }
  .dc-name {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #38f;
  }
  .dc-desc {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #999;
    margin-top: 2px;
  }
}

.app-actions {
  position: fixed;
  bottom: 0;
  z-index: 10;
  right: 0;
  left: 220px;
  width: auto;
  padding: 10px;
  min-width: 780px;
  transition: right .5s;
  background-color: #fff;
  box-shadow: 0 -3px 5px #eee;
  .form-actions {
    text-align: center;
  }
}
</style>